<template>
  <div class="user-container">
    <el-row>
      <el-col :span="6">
        <department-tree class="department-tree" @node-click="handleNodeClick"/>
      </el-col>
      <el-col :span="18" class="user-list">
        <div class="head">
          <el-input size="mini" v-model="param.keyword" clearable placeholder="输入姓名搜索" class="custom-input" @keyup.enter="search">
            <template #append>
              <el-button size="mini" class="custom-btn" icon="el-icon-search" @click="search">搜索</el-button>
            </template>
          </el-input>
        </div>
        <el-table :data="userList" size="small" style="width: 100%;">
          <el-table-column type="expand">
            <template #default="props">
              <el-card class="box-card">
                <template #header>
                  <div class="clearfix">
                    <span>基础信息</span>
                  </div>
                </template>
                <div class="table-wrapper">
                  <table class="fl-table">
                    <tbody>
                      <tr><td>编号</td><td>{{props.row.code}}</td></tr>
                      <tr><td>姓名</td><td>{{props.row.name}}</td></tr>
                      <tr><td>性别</td><td>{{props.row.gender}}</td></tr>
                      <tr><td>出生日期</td><td>{{props.row.birthday}}</td></tr>
                      <tr><td>籍贯</td><td>{{props.row.nativePlace}}</td></tr>
                      <tr><td>民族</td><td>{{props.row.nation}}</td></tr>
                    </tbody>
                  </table>
                </div>
              </el-card>
              <el-card class="box-card">
                <template #header>
                  <div class="clearfix">
                    <span>工作信息</span>
                  </div>
                </template>
                <div class="table-wrapper">
                  <table class="fl-table">
                    <tbody>
                      <tr><td>岗位</td><td>{{props.row.postName}}</td></tr>
                      <tr><td>人员状态</td><td>{{stateMap[props.row.status]}}</td></tr>
                      <tr><td>入职时间</td><td>{{props.row.contractStartDate}}</td></tr>
                    </tbody>
                  </table>
                </div>
              </el-card>
              <el-card class="box-card">
                <template #header>
                  <div class="clearfix">
                    <span>通讯信息</span>
                  </div>
                </template>
                <div class="table-wrapper">
                  <table class="fl-table">
                    <tbody>
                      <tr><td>移动电话</td><td>{{props.row.mobile}}</td></tr>
                      <tr><td>办公室电话</td><td>{{props.row.telephone}}</td></tr>
                      <tr><td>电子邮箱</td><td>{{props.row.email}}</td></tr>
                    </tbody>
                  </table>
                </div>
              </el-card>
            </template>
          </el-table-column>
          <el-table-column prop="username" label="账号"/>
          <el-table-column prop="name" label="姓名"/>
          <el-table-column prop="gender" label="性别"/>
          <el-table-column :show-overflow-tooltip="true" prop="email" label="邮箱"/>
          <el-table-column label="状态" align="center">
            <template #default="scope">
              {{stateMap[scope.row.status]}}
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center">
            <template #default="scope">
              <edit :data="scope.row"/>
            </template>
          </el-table-column>
        </el-table>
        <page :total="total" :current-change="currentChange" :size-change="sizeChange"/>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import {ref} from "vue"
  import Edit from "./edit"
  import DepartmentTree from "./tree"
  import Page from "../../../components/Page"
  import {getUserList} from "../../../api/organizational/user";
  export default {
    components: {
      Edit,
      Page,
      DepartmentTree
    },
    setup() {
      const stateMap = {"trial": "试用", "trial_extension": "试用延期", "official": "正式", "dismissal": "解聘", "separation": "离职"}
      const total = ref(0)
      const userList = ref([])
      const param = ref({
        current: 1,
        size: 20,
        keyword: "",
        departmentId: ""
      })
      const loadUserList = () => {
        getUserList(param.value, res => {
          console.log(res)
          userList.value = res.list
          total.value = res.total
        })
      }
      loadUserList();
      const handleNodeClick = data => {
        param.value.current = 1
        param.value.departmentId = data.id
        loadUserList()
      }
      // 页码改变
      const currentChange = (currentPage) => {
        param.value.current = currentPage;
        loadUserList()
      }
      // 页面显示数量改变
      const sizeChange = (size) => {
        param.value.size = size;
        loadUserList()
      }
      const search = () => {
        loadUserList()
      }
      return {
        stateMap,
        param,
        total,
        userList,
        handleNodeClick,
        currentChange,
        sizeChange,
        search
      }
    }
  }
</script>

<style scoped lang="scss">
  .user-container {
    margin: 20px;
    .department-tree {
      padding: 0 10px 0 0;
    }
    .user-list {
      padding: 0 0 0 10px;
      .head {
        margin-bottom: 10px;
        .custom-input {
          width: 50%;
          min-width: 300px;
        }
        .custom-btn {
          &:hover {
            color: #415fff;
          }
        }
      }
    }
  }
  .box-card {
    max-width: 500px;
  }
  .fl-table {
    border-radius: 5px;
    font-size: 12px;
    font-weight: normal;
    border: none;
    border-collapse: collapse;
    width: 100%;
    background-color: white;
  }
  .fl-table td {
    border: 1px solid #f8f8f8;
    font-size: 12px;
    padding: 12px;
  }
  .fl-table tr td:nth-child(1) {
    background: #F8F8F8;
    width: 30%;
    min-width: 100px;
  }
</style>
